[Day18] 表單使用進階

第 12 屆 iThome 鐵人賽

DAY 18

Modern Web

少年學Vue，如隙中窺月系列第 18 篇

12th鐵人賽

Leo

2020-10-02 21:08:48

765 瀏覽

分享至

使用 v-for 動態產生選項

如果我們今天要將陣列的資料放進 select 單選下拉式選單中，可以在 option 標籤中使用 v-for，將 item 帶入到選項中，記得要在 value 前面加上 : ，因為 value 的值是隨著陣列的內容而不同是一種動態的屬性，最後我們使用 v-model 將 select 和資料 selected 綁定，當我們點擊選項後，選項的 value 就會變成 selected 的值。

<body>
    <div class="app">
        <select v-model="select">
            <option disabled>請選擇</option>
            <option v-for="item in dataArray" :value="item">{{item}}</option>
        </select>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            dataArray:['Leo','Perter','Harry'],
						selected:''
        }
    });
</script>

替換 checkbox 值

先前我們有提到，若將 checkbox 綁定在資料上，當我們點擊 checkbox 欄位，此時綁定的資料會出現 true 或者 false，如果我們想要將 true 或 false 替換成自己想要的值，可以使用 true-value ＝'我們設定的值'，false-value ＝'我們設定的值'，比如果們將 true 設定成男生，false 設定成女生，之後點擊 checkbox 後，checkbox 綁定的資料 gender 就會呈現男生或女生。

<body>
    <div class="app">
        <input type="checkbox" v-model='checkbox' true-value='男生' false-value='女生'>{{gender}}
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            gender:'男生',
        }
    });
</script>

v-model.lazy

先前我們提到，如果我們使用 v-model 將 input 輸入還有資料 text 綁定，此時當我們在 input 輸入欄位內輸入值，{{text}} 畫面沒有馬上跟著改變，而是等到當我們輸入結束，跳出輸入框時，畫面才跟著變動，原因就在於我們在 v-model 加上 lazy，來達成這個效果。

<body>
    <div class="app">
        <input type="text" v-model.lazy='text'> {{text}}
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:''
        }
    });
</script>

v-model.number

如果我們使用 typeof 查看 input 綁定的資料 text，可以發現它是字串的形式，如果我們想要將字串的形式改成數字，可以再 v-model 後面加上 .number，此時我們會發現 text 的 typeof 變成是 number。

<body>
    <div class="app">
        <input type="text" v-model.number='text'> {{typeof(text)}}{{text}}
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:''
        }
    });
</script>

v-model.trim

如果我們要 input 輸入欄位的開頭字尾的空白給刪除，可以再 v-model 後面加上 .trim，此時就算我們在輸入欄位的開頭還是結尾加上空白鍵，最後在畫面呈現時都會省略。

<body>
    <div class="app">
        <input type="text" v-model.trim='text'>{{text}}
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:''
        }
    });
</script>